<!DOCTYPE html>
<html>

<head>
    <title>黑马顺风车</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" href="../css/common.css" />
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript" src="../js/upload.js"></script>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        table .h {
            width: 100px;
            height: 50px;
            font-weight: bold;
        }

        img {
            width: 100%;
            height: 100%;
            max-height: 180px;
        }
    </style>
    <script>
        $(function () {
            $.post('/account/api/userinfo','{}',function(d){
                $('.avatar').attr('src',d.data[0].avatar);
                $('#photoUrl').val(d.data[0].avatar);
            });

            var roleName = (localStorage.getItem('current_role') == '0' ? 'user' : 'driver');
            $('.role').each(function () {
                $(this).attr('href', '../' + roleName + '/' + $(this).attr('href'));
            });

        })

        function photoBtn(){
            $.postForm('/account/api/modify','#infoForm',function(d){
                showMsg(d.message);
                if(d.code == 200){
                    toUrl('userCenter.html',1000);
                }
            });
        }
        
    </script>
</head>

<body>

    <div data-role="page" id="pageone">
        <div data-role="header" data-position="fixed" data-tap-toggle="false">
            <a href="#" data-rel="back"
                class="ui-btn ui-btn-inline ui-icon-arrow-l ui-btn-icon-notext ui-corner-all">使用圆圈（默认）</a>
            <h1>修改头像</h1>
        </div>
        <div class="ui-content2" id="defaultpanel" style="margin:15px;">
            <form id="infoForm">
                <input name="avatar" type="hidden" id="photoUrl">
            </form>
            <table>
                <tr>
                    <td>
                        <img style="width:150px;height:150px;" class="avatar">
                    </td>
                    <td valign="bottom">
                        <img style="width:70px;height:70px;" class="avatar">
                    </td>
                </tr>
                <tr><td colspan="2">&nbsp;</td></tr>
                <tr><td colspan="2">&nbsp;</td></tr>
                <tr>
                    <td>
                        <input type="file" name="file" id="avatar" />
                    </td>
                    <td align="right" ><button class="ui-btn-active" onclick="photoBtn()" style="width:100px;">提交</button></td>
                </tr>
                
            </table>
        </div>
        <div data-role="footer" data-position="fixed" data-tap-toggle="false">
            <div data-role="navbar" style="margin: 0;" id="footerLink">
                <ul>
                    <li><a href="user.html" data-ajax="false" data-icon="home" class="role">首页</a></li>
                    <li><a href="trip.html" data-ajax="false" data-icon="grid" class="role">我的行程</a></li>
                    <li><a href="order.html" data-ajax="false" data-icon="bullets" class="role">我的订单</a></li>
                    <li><a href="userCenter.html" data-ajax="false" data-icon="user" class="ui-btn-active">个人中心</a></li>
                </ul>
            </div>
        </div>
    </div>

</body>

</html>